<template>
  <el-container style="height: 100%">
    <el-aside v-if="isCollapse?asideWidth='64px':asideWidth='200px'" :width="asideWidth">
      <el-card style="--el-card-padding: 0;cursor: pointer">
        <el-image v-if="isCollapse" style="width: 64px; height: 60px"
                  :src="'static/img/littleLogo.png'"></el-image>
        <el-image v-else style="width: 200px; height: 60px" :src="'static/img/logo.png'"></el-image>
      </el-card>
      <transition name="el-zoom-in-center">
        <el-menu mode="vertical" :collapse="isCollapse" :collapse-transition="false" router :default-openeds="['3','4']" :default-active="active">
          <el-menu-item index="/home">
            <el-icon>
              <Setting/>
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location></location>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/userList">用户列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location></location>
              </el-icon>
              <span>影厅管理</span>
            </template>
            <el-menu-item index="/hallList">影厅列表</el-menu-item>
            <el-menu-item index="1-2">座位视图</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <location></location>
              </el-icon>
              <span>影片管理</span>
            </template>
            <el-menu-item index="/movieList">影片列表</el-menu-item>
            <el-menu-item index="/movieShowingList">正在热映</el-menu-item>
            <el-menu-item index="/movieComingList">即将上映</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <location></location>
              </el-icon>
              <span>场次管理</span>
            </template>
            <el-menu-item index="/sessionList">场次列表</el-menu-item>
            <el-menu-item index="/movieShowingList">今日场次</el-menu-item>
            <el-menu-item index="/addSession/0">添加场次</el-menu-item>
<!--            <el-menu-item index="/movieComingList">即将上映</el-menu-item>-->
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <location></location>
              </el-icon>
              <span>评论管理</span>
            </template>
            <el-menu-item index="/sessionList">评论列表</el-menu-item>
            <!--            <el-menu-item index="/movieShowingList">正在热映</el-menu-item>-->
            <!--            <el-menu-item index="/movieComingList">即将上映</el-menu-item>-->
          </el-sub-menu>
        </el-menu>
      </transition>
    </el-aside>
    <el-container>
      <el-header height="64px" style="margin-bottom: 10px">
        <el-card style="height: 100%">
          <el-row justify="space-between" align="middle">
            <el-col :span="12" style="text-align: left">
              <el-icon v-if="!isCollapse" @click="isCollapse=!isCollapse" style="cursor: pointer" :size="30">
                <Fold/>
              </el-icon>
              <el-icon v-else @click="isCollapse=!isCollapse" style="cursor: pointer" :size="30">
                <Expand/>
              </el-icon>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <ZzjDarkSwitch></ZzjDarkSwitch>
            </el-col>
          </el-row>
        </el-card>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import ZzjDarkSwitch from "../components/ZzjDarkSwitch.vue";
import {ref, watch} from "vue";
import {Expand, Fold, Location, Setting} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";

const isCollapse = ref(false)
const asideWidth = ref(200)

/**
 * 当前页面
 */
const active = ref();
/**
 * 理由
 */
const route = useRoute();

/**
 * 监听路由
 */
watch(route, () => {
  active.value = "/" + route.path.split("/")[1];
});
</script>

<style scoped>


.el-header {
  padding: 0;
}


</style>
